<template>
  <canvas class="webgl" ref="containerRef"></canvas>

  <BufferGeometryInfo />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useThree } from '@/hooks/use-three-hook'
import { BufferAttribute, BufferGeometry, Mesh, MeshBasicMaterial } from 'three'
import BufferGeometryInfo from './BufferGeometryInfo.vue'

const containerRef = ref<HTMLCanvasElement | null>(null)
const { scene, camera, addAnimationCallback } = useThree(containerRef)

onMounted(() => {
  if (scene.value && camera.value) {
    const count = 5000
    const positionsArray = new Float32Array(count * 3 * 3)
    const colorsArray = new Float32Array(count * 3 * 3)
    for (let i = 0, len = count * 3 * 3; i < len; i++) {
      positionsArray[i] = Math.random() - 0.5
      colorsArray[i] = Math.random()
    }

    const positionsAttribute = new BufferAttribute(positionsArray, 3)
    const colorsAttribute = new BufferAttribute(colorsArray, 3)

    const geometry = new BufferGeometry()
    geometry.setAttribute('position', positionsAttribute)
    geometry.setAttribute('color', colorsAttribute)

    const material = new MeshBasicMaterial({
      // color: 0xff0000,
      vertexColors: true
    })
    const mesh = new Mesh(geometry, material)

    scene.value.add(mesh)

    // 添加自定义动画逻辑
    addAnimationCallback((delta) => {
      // 旋转
      mesh.rotation.x += delta
      mesh.rotation.y += delta * 0.5
    })
  }
})
</script>
<style scoped>
.el-link {
  margin-right: 10px;
}
</style>